import React from 'react';
interface PaginationProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}
export function Pagination({
  currentPage,
  totalPages,
  onPageChange
}: PaginationProps) {
  const pages = Array.from({
    length: totalPages
  }, (_, i) => i + 1);
  // Show max 5 page buttons, with current page in the middle when possible
  let displayedPages = pages;
  if (totalPages > 5) {
    if (currentPage <= 3) {
      displayedPages = pages.slice(0, 5);
    } else if (currentPage >= totalPages - 2) {
      displayedPages = pages.slice(totalPages - 5);
    } else {
      displayedPages = pages.slice(currentPage - 3, currentPage + 2);
    }
  }
  return <div className="flex justify-center mt-10">
      <div className="flex items-center space-x-2">
        {/* Previous button */}
        <button onClick={() => currentPage > 1 && onPageChange(currentPage - 1)} disabled={currentPage === 1} className={`px-3 py-1 rounded-md ${currentPage === 1 ? 'text-gray-400 cursor-not-allowed' : 'text-[#343a40] hover:bg-[#e9ecef]'}`}>
          &laquo;
        </button>
        {/* First page button when not in view */}
        {totalPages > 5 && currentPage > 3 && <>
            <button onClick={() => onPageChange(1)} className="px-3 py-1 rounded-md text-[#343a40] hover:bg-[#e9ecef]">
              1
            </button>
            {currentPage > 4 && <span className="px-2 text-gray-400">...</span>}
          </>}
        {/* Page buttons */}
        {displayedPages.map(page => <button key={page} onClick={() => onPageChange(page)} className={`px-3 py-1 rounded-md ${currentPage === page ? 'bg-[#d4a373] text-white' : 'text-[#343a40] hover:bg-[#e9ecef]'}`}>
            {page}
          </button>)}
        {/* Last page button when not in view */}
        {totalPages > 5 && currentPage < totalPages - 2 && <>
            {currentPage < totalPages - 3 && <span className="px-2 text-gray-400">...</span>}
            <button onClick={() => onPageChange(totalPages)} className="px-3 py-1 rounded-md text-[#343a40] hover:bg-[#e9ecef]">
              {totalPages}
            </button>
          </>}
        {/* Next button */}
        <button onClick={() => currentPage < totalPages && onPageChange(currentPage + 1)} disabled={currentPage === totalPages} className={`px-3 py-1 rounded-md ${currentPage === totalPages ? 'text-gray-400 cursor-not-allowed' : 'text-[#343a40] hover:bg-[#e9ecef]'}`}>
          &raquo;
        </button>
      </div>
    </div>;
}